<template>
  <div>
    <div class="content-box">
      <img src="/service_1.png" alt="" class="bg-img" />
      <div class="content d-flex">
        <div class="d-none d-sm-flex content-left align-self-end mb-7">
          <span
            class="white--text"
            :style="`font-size: ${this.$i18n.locale == 'zh' ? 23 : 18}px`"
            >{{ $t('descOne')
            }}<span class="black--text">{{ $t('descTwo') }}</span
            >{{ $t('descThree') }}</span
          >
        </div>
        <div class="content-right bg-white mr-md-10 px-md-3">
          <img src="/index_2.png" alt="" class="d-none d-sm-flex" />
          <p class="right-title text-center">{{ $t('servicePage.title') }}</p>
          <div v-for="(item, index) in $t('servicePage.topList')" :key="index">
            <div class="subtitle">{{ item.title }}：</div>
            <p>{{ item.description }}</p>
          </div>
          <ul class="list">
            <li
              v-for="(item, index) in $t('servicePage.middleList')"
              :key="index"
            >
              <p class="item-title">{{ item.title }}：</p>
              <p>{{ item.description }}</p>
              <v-treeview
                v-show="
                  index == $t('servicePage.bottomList').length &&
                  equipment == 'pc'
                "
                open-on-click
                :items="$t('servicePage.bottomList')"
                class="tree-list"
              ></v-treeview>
            </li>
          </ul>
        </div>
      </div>
      <v-row v-show="equipment == 'phone'" justify="center" class="bottom-list">
        <v-expansion-panels accordion>
          <v-expansion-panel
            v-for="(item, i) in $t('servicePage.bottomList')"
            :key="i"
          >
            <v-expansion-panel-header class="panel-title">{{
              item.name
            }}</v-expansion-panel-header>
            <v-expansion-panel-content class="panel-content">
              <p v-for="(items, index) in item.children" :key="index">
                {{ items.name }}
              </p>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-row>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData() {
    return {
      equipment: '',
    }
  },
  mounted() {
    this.equipment = localStorage.getItem('equipment')
  },
}
</script>

<style lang="scss" scoped>
p {
  margin-bottom: 0;
  font-size: 13px;
  color: #333;
}
.content-box {
  position: relative;
  .bg-img {
    width: 100%;
  }
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .content-left {
      flex: 1;
      background: rgba($color: #eee, $alpha: 0.5);
      font-size: 23px;
      padding: 10px 0 10px 24px;
    }
    .bg-white {
      background: rgba(255, 255, 255, 0.8);
    }
    .content-right {
      max-width: 570px;
      position: relative;
      color: #333;
      overflow-y: auto;

      img {
        position: absolute;
        width: 450px;
        height: 115px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .right-title {
        font-size: 15px;
        color: #cd0000;
        margin-bottom: 8px;
      }
      .subtitle {
        color: $blue198;
        font-size: 13px;
        font-weight: bold;
      }

      .list {
        li {
          margin-bottom: 8px;
        }
        .item-title {
          color: #cd0000;
          font-size: 13px;
          & ~ p {
            font-size: 12px;
          }
        }
        .tree-list {
          font-size: 12px;
        }
      }
    }
  }
}

@media screen and (max-width: 765px) {
  .content {
    position: relative !important;
  }
  .bottom-list {
    margin: 0.27rem 0;
  }
  .panel-title {
    font-size: 0.21rem;
  }
  .panel-content {
    font-size: 0.19rem;
  }
  .panel-content p {
    margin-bottom: 0.07rem;
  }
}
</style>
